<template> 
    <div class="acupoint">
        <div class="head">
            <image class="img"  src="https://rqys.hleason.com/dist/images/csjx_banner.png"></image> 
        </div> 
        <div class="content">
            <div class="group"  v-for="(list,indexList) in dataList" :key="indexList">
                <div class="list-title">
                    <group-title :title="list.title"></group-title>
                </div>  
                <div class="list-item ">
                    <ul class="class-group clear-both">
                        <li class="class-item float-left text-center" v-for="(item,itemIndex) in list.pointSons" :key="itemIndex" @click="detailItem(item)"><span>{{item.title}}</span></li>
                    </ul>
                </div>
            </div>
        </div>
    </div> 
</template>

<script>
 import groupTitle from '@/components/tpl/group-title'
 import * as api  from '@/utils/api' 
export default {
    components: {
        groupTitle,
    }, 
    onShow(){
        this.getAcupointList();
    },
    data () {
        return {
            dataList:[],
            
        }
    },
    methods:{
        //跳转详情
        detailItem(item){
            let url = `./../acupoint-detail/main?typeId=${item.id}&title=${item.title}`;
            wx.navigateTo({url}) 
        },
        getAcupointList(){
        let vm =this; 
        let body={
            model: "Points",
            orderBy:"create_time",
            with:{
                "0":"pointSons"
            },
            condition:{
                parent_id: 0, 
            }
        };
        api.commonSite(body).then(res=>{  
            if(res.data.code==200){ 
                vm.dataList=res.data.data.data;
            } 
             
        });
    },
    }, 
}

</script>
<style lang="scss" scoped>
 .acupoint{
    min-height:100%;
    box-sizing:border-box;
    padding:30rpx;
    .head{
        width:100%;
        height:200rpx;
        .img{
            width:100%;
            height:100%;
        }
    }
    .content{
        width:100%;  
        .group{
            margin-top:20rpx;
            background:#fff;
            padding:20rpx;
            box-sizing:border-box;
            .list-title{
                width:100%;
            }
            .list-item{
                width:100%;
                .class-item{
                    width:33.33%;
                    font-size:28rpx;
                    color:#333;
                    padding:20rpx 0;
                    margin-bottom:20rpx;
                    box-sizing:border-box;
                    span{
                        padding:10rpx 4rpx;
                        border-bottom:1rpx solid #E0E0E0; 
                    }
                }
            }
        }
    }
 }
</style>
